<!doctype html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>






<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
    
  
  <link href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/lh706.github.io/css/main.css?v=5.1.1" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="JavaScript,总结,读书,设计模式," />








  <link rel="shortcut icon" type="image/x-icon" href="/lh706.github.io/favicon.ico?v=5.1.1" />






<meta name="description" content="单例模式 简单就是只会执行一次的函数">
<meta name="keywords" content="JavaScript,总结,读书,设计模式">
<meta property="og:type" content="article">
<meta property="og:title" content="js设计模式(一)">
<meta property="og:url" content="https://lh706.github.io/lh706.github.io/2017/05/20/js设计模式-一/index.html">
<meta property="og:site_name" content="Albert的blog">
<meta property="og:description" content="单例模式 简单就是只会执行一次的函数">
<meta property="og:updated_time" content="2017-05-20T06:46:14.799Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="js设计模式(一)">
<meta name="twitter:description" content="单例模式 简单就是只会执行一次的函数">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/lh706.github.io/',
    scheme: 'Mist',
    sidebar: {"position":"right","display":"always","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://lh706.github.io/lh706.github.io/2017/05/20/js设计模式-一/"/>





  <title>js设计模式(一) | Albert的blog</title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  














  
  
    
  

  <div class="container sidebar-position-right page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/lh706.github.io/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Albert的blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description"></h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/lh706.github.io/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/lh706.github.io/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/lh706.github.io/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-tags " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://lh706.github.io/lh706.github.io/lh706.github.io/2017/05/20/js设计模式-一/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Albert">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/lh706.github.io/my.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Albert的blog">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">js设计模式(一)</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-05-20T14:24:30+08:00">
                2017-05-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        <h3 id="单例模式"><a href="#单例模式" class="headerlink" title="单例模式"></a>单例模式</h3><blockquote>
<p>简单就是只会执行一次的函数</p>
</blockquote>
<a id="more"></a>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//代理模式下 的 单例制造函数</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> c = <span class="number">1</span>;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">letSingle</span> (<span class="params"></span>) </span>&#123; <span class="comment">//代理函数</span></div><div class="line">  <span class="keyword">var</span> fn = [].shift.call(<span class="built_in">arguments</span>,<span class="number">1</span>); <span class="comment">// 获得传入的函数</span></div><div class="line">  <span class="keyword">var</span> instance; <span class="comment">//通过闭包保存的实例,初始为undefined</span></div><div class="line">  <span class="keyword">var</span> _arguments = <span class="built_in">arguments</span>;</div><div class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="comment">// 返回函数,形成闭包</span></div><div class="line">		<span class="keyword">if</span>(!instance) &#123; <span class="comment">//通过instance判断是否执行</span></div><div class="line">			instance=fn.call(<span class="keyword">this</span>,_arguments); 执行fn并且保存返回值</div><div class="line">		&#125;</div><div class="line">	<span class="keyword">return</span> instance;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">var</span> b=letSingle(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">  <span class="built_in">console</span>.info(<span class="string">"b执行"</span>);</div><div class="line">  <span class="keyword">return</span> (c++);</div><div class="line">&#125;);</div><div class="line"><span class="comment">//此时 b为letSingle所返回的函数;</span></div><div class="line"></div><div class="line"><span class="built_in">console</span>.info(b());</div><div class="line"><span class="built_in">console</span>.info(b());</div><div class="line"><span class="built_in">console</span>.info(b());	</div><div class="line"></div><div class="line">输出为 : </div><div class="line">b执行</div><div class="line"><span class="number">1</span></div><div class="line"><span class="number">1</span></div><div class="line"><span class="number">1</span></div><div class="line"></div><div class="line">单例模式和惰性加载是非常类似的,都是通过闭包保存一个判断的变量,</div><div class="line">不同在于,单例是判断是否返回值,每次调用,都需要判断</div><div class="line">惰性是判断返回的函数是哪一个,只在第一次判断</div></pre></td></tr></table></figure>
<h3 id="策略模式"><a href="#策略模式" class="headerlink" title="策略模式"></a>策略模式</h3><blockquote>
<p>用组合,代理,多态等,将一组算法或者业务逻辑封装成一个策略类</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//验证类</span></div><div class="line"><span class="keyword">var</span> validate = &#123;</div><div class="line">	<span class="attr">errorMsg</span>:[],</div><div class="line">	<span class="attr">strateg</span>:&#123;&#125;,</div><div class="line">	<span class="attr">addRule</span>:<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</div><div class="line">		<span class="keyword">var</span> type;</div><div class="line">		<span class="keyword">var</span> name = data.name;</div><div class="line">		<span class="comment">// data.strateg 当data.strateg为string时,转换为数组;</span></div><div class="line">		<span class="comment">// data.name 为空则推入错误,返回this</span></div><div class="line">		<span class="keyword">if</span>(!<span class="built_in">Array</span>.isArray(data.strateg)) data.strateg = [data.strateg];</div><div class="line">		<span class="keyword">if</span>(!data.name)&#123;</div><div class="line">			<span class="keyword">this</span>.errorMsg.push(<span class="string">"addRule中,name不能为空"</span>); </div><div class="line">			<span class="keyword">return</span> <span class="keyword">this</span>;</div><div class="line">		&#125;;</div><div class="line">		<span class="keyword">for</span>( i <span class="keyword">in</span> data.strateg)&#123;</div><div class="line">			type = data.strateg[i];</div><div class="line">			<span class="keyword">if</span>(<span class="keyword">this</span>.strateg[type])&#123;</div><div class="line">				<span class="comment">//如果存在此规则 --- 执行验证函数</span></div><div class="line">				<span class="keyword">var</span> info = <span class="keyword">this</span>.strateg[type](data.name,data.value,data.info);				</div><div class="line">				<span class="keyword">if</span>(!info) <span class="keyword">continue</span>;</div><div class="line">				<span class="keyword">this</span>.errorInfo(info,data.info.errorMsg);</div><div class="line">			&#125;<span class="keyword">else</span>&#123;</div><div class="line">				<span class="comment">//出现不存在的验证规则,则推入一个错误</span></div><div class="line">				<span class="keyword">this</span>.errorMsg.push(<span class="string">"不存在此验证规则:"</span>+type);</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">		<span class="keyword">return</span> <span class="keyword">this</span>;				</div><div class="line">	&#125;,</div><div class="line">	<span class="attr">outputError</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="keyword">if</span>(<span class="keyword">this</span>.errorMsg.length==<span class="number">0</span>) <span class="keyword">return</span> <span class="literal">false</span>;	</div><div class="line">		<span class="keyword">return</span> <span class="keyword">this</span>.errorMsg.join(<span class="string">"\n"</span>);</div><div class="line">	&#125;,</div><div class="line">	<span class="attr">errorInfo</span>:<span class="function"><span class="keyword">function</span>(<span class="params">info,customInfo</span>)</span>&#123;</div><div class="line">		customInfo ? <span class="keyword">this</span>.errorMsg.push(customInfo) : info &amp;&amp; <span class="keyword">this</span>.errorMsg.push(info);	</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"></div><div class="line"><span class="comment">//策略类--验证规则	</span></div><div class="line">validate.strateg.isEmpty = <span class="function"><span class="keyword">function</span>(<span class="params">name,value</span>)</span>&#123;</div><div class="line">	<span class="keyword">var</span> prompt = <span class="literal">false</span>;</div><div class="line">	<span class="keyword">if</span>(value === <span class="string">''</span> || value === <span class="literal">undefined</span>)&#123;</div><div class="line">		prompt = name+<span class="string">"的值不能为空"</span>;</div><div class="line">	&#125;;</div><div class="line">	<span class="keyword">return</span> prompt;</div><div class="line">&#125;;</div><div class="line">validate.strateg.isAlphaNum = <span class="function"><span class="keyword">function</span>(<span class="params">name,value</span>)</span>&#123;</div><div class="line">	<span class="keyword">var</span> prompt = <span class="literal">false</span>;</div><div class="line">	<span class="keyword">if</span>(<span class="regexp">/[^a-z0-9]/i</span>.test(value))&#123;</div><div class="line">		prompt = name+<span class="string">"传入的值只能是字母和数字不能包含特殊字符"</span>;</div><div class="line">	&#125;;</div><div class="line">	<span class="keyword">return</span> prompt;</div><div class="line">&#125;;</div><div class="line">validate.strateg.isNumber = <span class="function"><span class="keyword">function</span>(<span class="params">name,value,info</span>)</span>&#123;</div><div class="line">	<span class="keyword">var</span> prompt = <span class="literal">false</span>;</div><div class="line">	<span class="keyword">var</span> minLength = info.minLength || <span class="number">6</span>;	</div><div class="line">	<span class="keyword">if</span>( <span class="built_in">isNaN</span>(value) || value.toString().length&lt;minLength)&#123;</div><div class="line">		<span class="keyword">var</span> prompt = name+<span class="string">"只能是数字且不小于"</span>+minLength+<span class="string">"位"</span>;</div><div class="line">	&#125;;</div><div class="line">	<span class="keyword">return</span> prompt;</div><div class="line">&#125;;</div><div class="line"></div><div class="line"><span class="comment">// 用户代码</span></div><div class="line">	<span class="keyword">var</span> data1 = <span class="string">"***"</span>,</div><div class="line">		data2 = <span class="string">''</span>,</div><div class="line">		number = <span class="number">123</span>,</div><div class="line">		string = <span class="string">"STRING"</span>;</div><div class="line">		</div><div class="line"><span class="keyword">var</span> errors = validate</div><div class="line">	.addRule(&#123;</div><div class="line">		<span class="attr">name</span>:<span class="string">'data1'</span>,</div><div class="line">		<span class="attr">value</span>:data1,</div><div class="line">		<span class="attr">strateg</span>:[<span class="string">"isEmpty"</span>,<span class="string">"isAlphaNum"</span>],</div><div class="line">		<span class="attr">info</span>:&#123;</div><div class="line">			</div><div class="line">		&#125;	</div><div class="line">	&#125;)</div><div class="line">	.addRule(&#123;</div><div class="line">		<span class="attr">name</span>:<span class="string">'number'</span>,</div><div class="line">		<span class="attr">value</span>:number,</div><div class="line">		<span class="attr">strateg</span>:[<span class="string">"isEmpty"</span>,<span class="string">"isNumber"</span>],</div><div class="line">		<span class="attr">info</span>:&#123;</div><div class="line">			<span class="attr">minLength</span>:<span class="number">6</span></div><div class="line">		&#125;	</div><div class="line">	&#125;)</div><div class="line">	.addRule(&#123;</div><div class="line">		<span class="attr">name</span>:<span class="string">'string'</span>,</div><div class="line">		<span class="attr">value</span>:string,</div><div class="line">		<span class="attr">strateg</span>:[<span class="string">"isEmpty"</span>,<span class="string">"isArr"</span>,<span class="string">"isNumber"</span>],</div><div class="line">		<span class="attr">info</span>:&#123;</div><div class="line">			<span class="attr">minLength</span>:<span class="number">9</span></div><div class="line">		&#125;	</div><div class="line">	&#125;)</div><div class="line">	.addRule(&#123;</div><div class="line">		<span class="attr">name</span>:<span class="string">'data2'</span>,</div><div class="line">		<span class="attr">value</span>:data2,</div><div class="line">		<span class="attr">strateg</span>:<span class="string">"isEmpty"</span>,</div><div class="line">		<span class="attr">info</span>:&#123;</div><div class="line">			<span class="attr">minLength</span>:<span class="number">6</span></div><div class="line">		&#125;	</div><div class="line">	&#125;)</div><div class="line">	.addRule(&#123;</div><div class="line">		<span class="attr">value</span>:string,</div><div class="line">		<span class="attr">strateg</span>:<span class="string">"isEmpty"</span>,</div><div class="line">		<span class="attr">info</span>:&#123;</div><div class="line">			<span class="attr">minLength</span>:<span class="number">6</span></div><div class="line">		&#125;	</div><div class="line">	&#125;)</div><div class="line">	.outputError();</div><div class="line">	<span class="built_in">console</span>.error(errors);</div><div class="line"></div><div class="line">    输出为</div><div class="line">data1传入的值只能是字母和数字不能包含特殊字符</div><div class="line">number只能是数字且不小于<span class="number">6</span>位</div><div class="line">不存在此验证规则:isArr</div><div class="line">string只能是数字且不小于<span class="number">9</span>位</div><div class="line">data2的值不能为空</div><div class="line">addRule中,name不能为空</div><div class="line"></div><div class="line">总体就是将验证规则组成一个策略组,然后validate对象将验证交给这个组代理</div></pre></td></tr></table></figure>
<h3 id="代理模式"><a href="#代理模式" class="headerlink" title="代理模式"></a>代理模式</h3><pre><code>代理模式-将操作交由代理来实现,代理上会有其他的处理,使之在适当的时候才去操作
虚拟代理-开销大之类的操作,用异步的方式(延迟)代理去实现
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div></pre></td><td class="code"><pre><div class="line">    <span class="comment">//虚拟代理之延迟处理功能</span></div><div class="line">	<span class="keyword">var</span> getInput = <span class="function"><span class="keyword">function</span> (<span class="params">type</span>) </span>&#123;</div><div class="line">		<span class="keyword">if</span>(type === <span class="string">"all"</span>) <span class="keyword">return</span> <span class="built_in">document</span>.getElementsByTagName(<span class="string">'input'</span>);</div><div class="line">		<span class="keyword">if</span>(<span class="keyword">typeof</span> type === <span class="string">"number"</span>) <span class="keyword">return</span> <span class="built_in">document</span>.getElementsByTagName(<span class="string">'input'</span>)[type<span class="number">-1</span>];</div><div class="line">		<span class="keyword">if</span>(<span class="built_in">Object</span>.prototype.toString.call(type) == <span class="string">'[object Array]'</span>)&#123;</div><div class="line">			<span class="keyword">var</span> inputArr = [];</div><div class="line">			<span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> type)&#123;</div><div class="line">				<span class="keyword">var</span> input = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'input'</span>)[type[i]<span class="number">-1</span>];</div><div class="line">				 input &amp;&amp; inputArr.push(input);</div><div class="line">			&#125;;</div><div class="line">			<span class="keyword">return</span> inputArr;</div><div class="line">		&#125;;</div><div class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line">	&#125;;</div><div class="line"></div><div class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> inputI = <span class="number">0</span>;inputI&lt;getInput(<span class="string">"all"</span>).length;inputI++)&#123;</div><div class="line">		getInput(<span class="string">"all"</span>)[inputI].onclick= <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="keyword">if</span>(<span class="keyword">this</span>.checked === <span class="literal">false</span>) <span class="keyword">return</span>;</div><div class="line">			proxySend(<span class="keyword">this</span>.value);</div><div class="line">		&#125;;</div><div class="line">	&#125;;</div><div class="line">    <span class="comment">// 代理发送,通过闭包保存需要发送的val</span></div><div class="line">    <span class="comment">// 2000ms没有再去点击checkbox才去发送</span></div><div class="line">	<span class="keyword">var</span> proxySend =(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="keyword">var</span> valArr = [];</div><div class="line">		<span class="keyword">var</span> time;</div><div class="line">		<span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>&#123;</div><div class="line">			idArr.push(value);</div><div class="line">			clearTimeout(time);</div><div class="line">			time = setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">				<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i&lt;valArr.length;i++)&#123;</div><div class="line">					sendInput(valArr[i]);</div><div class="line">				&#125;;</div><div class="line">				valArr = [];</div><div class="line">				time = <span class="literal">null</span>;</div><div class="line">			&#125;,<span class="number">2000</span>);</div><div class="line">		&#125;;</div><div class="line">	&#125;)();</div><div class="line"></div><div class="line">	<span class="keyword">var</span> sendInput = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>&#123;</div><div class="line">		<span class="built_in">console</span>.info(value+<span class="string">":发送"</span>);</div><div class="line">	&#125;;	</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">  缓存代理-代理中保存计算的值(花销大的计算结果),下一次先试着从缓存中调用</div><div class="line"> </div><div class="line">	<span class="keyword">var</span> proxy = (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="keyword">var</span> cache = &#123;&#125;;</div><div class="line">		<span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="keyword">var</span> args = <span class="built_in">Array</span>.prototype.join.call( <span class="built_in">arguments</span>, <span class="string">','</span> );</div><div class="line">			<span class="built_in">console</span>.info(args);	</div><div class="line">			<span class="keyword">if</span> ( args <span class="keyword">in</span> cache )&#123;</div><div class="line">				<span class="built_in">console</span>.info(cache);	</div><div class="line">				<span class="keyword">return</span> cache[ args ];</div><div class="line">			&#125;</div><div class="line">			<span class="keyword">return</span> cache[ args ] = mult.apply( <span class="keyword">this</span>, <span class="built_in">arguments</span> );</div><div class="line">		&#125;</div><div class="line">		&#125;)();</div><div class="line"></div><div class="line"><span class="comment">//通过*立即执行函数返回函数形成闭包,保存缓存cache,然后将*arguments拼接作为缓存对象的key,值为计算结果,通过*if(key in object)来得到重复的key</span></div><div class="line"></div><div class="line"><span class="comment">//高级函数与缓存代理</span></div><div class="line"><span class="keyword">var</span> createProxyFactory = <span class="function"><span class="keyword">function</span>(<span class="params"> fn </span>)</span>&#123;</div><div class="line">	<span class="keyword">var</span> cache = &#123;&#125;;</div><div class="line">		<span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="keyword">var</span> args = <span class="built_in">Array</span>.prototype.join.call( <span class="built_in">arguments</span>, <span class="string">','</span> );</div><div class="line">		<span class="keyword">if</span> ( args <span class="keyword">in</span> cache )&#123;</div><div class="line">		<span class="keyword">return</span> cache[ args ];</div><div class="line">		&#125;</div><div class="line">		<span class="keyword">return</span> cache[ args ] = fn.apply( <span class="keyword">this</span>, <span class="built_in">arguments</span> );</div><div class="line">		&#125;</div><div class="line">&#125;;</div><div class="line"><span class="keyword">var</span> proxyMult = createProxyFactory( mult ),</div><div class="line">proxyPlus = createProxyFactory( plus );</div><div class="line"></div><div class="line">alert ( proxyMult( <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ) ); </div><div class="line">alert ( proxyMult( <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ) ); </div><div class="line">alert ( proxyPlus( <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ) ); </div><div class="line">alert ( proxyPlus( <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ) ); </div><div class="line"></div><div class="line">不通过立即执行函数,而是调用函数来实现得到闭包,使不同的计算函数得到自己的缓存对象</div></pre></td></tr></table></figure>
<h3 id="观察者模式-订阅发布-自定义事件-触发"><a href="#观察者模式-订阅发布-自定义事件-触发" class="headerlink" title="观察者模式-订阅发布(自定义事件-触发)"></a>观察者模式-订阅发布(自定义事件-触发)</h3><pre><code>订阅--将key作为标志位,将key发生时需要执行的函数保存
发布--通过key寻找函数,并执行
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> subPub = (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="keyword">var</span> listenList = &#123;&#125;;</div><div class="line">	<span class="comment">//保存key:[fn1,fn2,fn3]</span></div><div class="line">	</div><div class="line">	<span class="keyword">var</span> listen = <span class="function"><span class="keyword">function</span>(<span class="params">key,fn</span>)</span>&#123;</div><div class="line">		<span class="keyword">if</span>(key <span class="keyword">in</span> listenList)&#123;</div><div class="line">			<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span> ;i&lt;listenList[key].length ; i++)&#123;</div><div class="line">				<span class="keyword">if</span>(listenList[key][i] == fn)<span class="keyword">return</span>;</div><div class="line">			&#125;</div><div class="line">		&#125;<span class="keyword">else</span>&#123;</div><div class="line">			listenList[key] = [];</div><div class="line">		&#125;;</div><div class="line">		listenList[key].push(fn);</div><div class="line">	&#125;;</div><div class="line">       <span class="comment">// 判断key与fn情况,然后将函数push保存</span></div><div class="line"></div><div class="line">	<span class="keyword">var</span> trigger = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="keyword">var</span> key = [].shift.call(<span class="built_in">arguments</span>);</div><div class="line">		<span class="keyword">if</span>(!listenList[key] || listenList[key].length == <span class="number">0</span>) <span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span> ; i&lt;listenList[key].length ; i++)&#123;</div><div class="line">			listenList[key][i].apply(<span class="keyword">this</span>,<span class="built_in">arguments</span>);</div><div class="line">		&#125;</div><div class="line">	&#125;;</div><div class="line">       <span class="comment">//通过key得到需要执行的函数,然后将参数传入执行</span></div><div class="line">       </div><div class="line">	<span class="keyword">var</span> remove = <span class="function"><span class="keyword">function</span>(<span class="params">key,fn</span>)</span>&#123;</div><div class="line">		<span class="keyword">if</span>(!listenList[key] || listenList[key].length == <span class="number">0</span>) <span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line">		<span class="keyword">if</span>(!fn)&#123;listenList[key].length = <span class="number">0</span>;<span class="keyword">return</span>&#125;</div><div class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span> ; i&lt;listenList[key].length ; i++)&#123;</div><div class="line">			<span class="keyword">if</span>(listenList[key][i] == fn)&#123;</div><div class="line">				listenList[key].splice(i,<span class="number">1</span>);</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">	&#125;;</div><div class="line"></div><div class="line">	<span class="keyword">return</span> &#123;</div><div class="line">		<span class="attr">remove</span>:remove,</div><div class="line">		<span class="attr">trigger</span>:trigger,</div><div class="line">		<span class="attr">listen</span>:listen</div><div class="line">	&#125;</div><div class="line">&#125;)()</div></pre></td></tr></table></figure>
      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/lh706.github.io/tags/JavaScript/" rel="tag"># JavaScript</a>
          
            <a href="/lh706.github.io/tags/总结/" rel="tag"># 总结</a>
          
            <a href="/lh706.github.io/tags/读书/" rel="tag"># 读书</a>
          
            <a href="/lh706.github.io/tags/设计模式/" rel="tag"># 设计模式</a>
          
        </div>
      

      
        
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/lh706.github.io/2017/05/20/js数据结构与算法(一)/" rel="next" title="js数据结构与算法(一)">
                <i class="fa fa-chevron-left"></i> js数据结构与算法(一)
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/lh706.github.io/2017/05/20/锋利的jquery/" rel="prev" title="锋利的jquery">
                锋利的jquery <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/lh706.github.io/my.jpg"
               alt="Albert" />
          <p class="site-author-name" itemprop="name">Albert</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
           
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/lh706.github.io/archives">
                <span class="site-state-item-count">20</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/lh706.github.io/tags/index.html">
                <span class="site-state-item-count">11</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/lh706" target="_blank" title="GitHub">
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.zhihu.com/people/liang-da-shu-shu" target="_blank" title="知乎">
                  
                  知乎
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#单例模式"><span class="nav-number">1.</span> <span class="nav-text">单例模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#策略模式"><span class="nav-number">2.</span> <span class="nav-text">策略模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#代理模式"><span class="nav-number">3.</span> <span class="nav-text">代理模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#观察者模式-订阅发布-自定义事件-触发"><span class="nav-number">4.</span> <span class="nav-text">观察者模式-订阅发布(自定义事件-触发)</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Albert</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>


        

        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js"></script>

  
  <script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

  
  <script type="text/javascript" src="/lh706.github.io/lib/canvas-nest/canvas-nest.min.js"></script>


  


  <script type="text/javascript" src="/lh706.github.io/js/src/utils.js?v=5.1.1"></script>

  <script type="text/javascript" src="/lh706.github.io/js/src/motion.js?v=5.1.1"></script>



  
  

  
  <script type="text/javascript" src="/lh706.github.io/js/src/scrollspy.js?v=5.1.1"></script>
<script type="text/javascript" src="/lh706.github.io/js/src/post-details.js?v=5.1.1"></script>



  


  <script type="text/javascript" src="/lh706.github.io/js/src/bootstrap.js?v=5.1.1"></script>



  


  




	





  





  





  






  





  

  

  

  

  

</body>
</html>
